<template>
	<div>
	  <HeaderNav :title="$t('m.headernav.CHARTLIST')" :showBack="false" />
	  <div class="Meet">
	    <van-search :placeholder="$t('m.msg.MSG5')" v-model="name" v-on:input="onRefresh()" />
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        :offset='10'
        v-model="loading"
        :finished="finished"
        :finished-text="$t('m.msg.MSG6')"
        :error.sync="error"
        :error-text="$t('m.msg.MSG7')"
        @load="loadData"
      >
	    <div class="contact_list">
	      <div class="contact_container" @click="toChart(item.id)" v-for="(item, index) in list" :key="index"  >
	        <div class="contact_item">
            <div class="contact_portrait">
              <img :src="item.httpAvatar" class="contact_portrait" />
            </div>
            <div class="contact_message">
              <div>
                 <span class="contact_name">
                <span class="contact_isOnline" :style="`color: ${item.isOnLine? 'rgb(6, 138, 87)' : '#a1a1a1'}`">● </span>
                {{item.name}}
                </span>
              <span v-for="id in chartIds" :key="id" >
                <span class="new_msg" v-if="id == item.id">{{$t('m.msg.MSG58')}}</span>
                <span class="contact_isOnline" v-if="id == item.id" style="position: relative;top: 4.5px;color: red;font-size: 30px;">● </span>
              </span>
              <div class="contact_content" v-if="item.chatRecord.type == 'text'"  >{{item.chatRecord.content}}</div>
              <div class="contact_content" v-if="item.chatRecord.type == 'image'" >[{{$t('m.msg.PHOTO')}}]</div>
              <div class="contact_content" v-if="item.chatRecord.type == 'video'" >[{{$t('m.msg.VEDIO')}}]</div>
             
              </div>
             <van-icon v-if="item.grade == 'blueDiamond'" name="gem-o" info="vip" color="#2161A1" size="30px" />
           <van-icon v-if="item.grade == 'anCrown'" name="bulb-o" info="vip" color= "#91A121" size="30px" />
            </div>
            <div class="contact_time">{{item.chatRecord.sendDate}}</div>
          </div>
          <div class="delete" @click.stop="deleteItem(item.id)">{{$t('m.msg.DELETE_BTN')}}</div>
	      </div>
        
	    </div>
	    </van-list>
      </van-pull-refresh>
	    <Footer :active="1" :chartFlag="false" />
	  </div>
	</div>
</template>

<script>
  import {
    Search,
    Icon,
    Tabbar,
    TabbarItem,
    List,
    PullRefresh 
  } from 'vant';
  import HeaderNav from '@/components/HeaderNav.vue'
  import Footer from '@/components/Footer.vue'
  import {postQuery, getQuery} from '@/api/query';
  export default {
    name: 'chartList',
    data() {
      return {
        name: '',
        page: 1,
        list:[],
        pages: 0,
        loading: false,
        error: false,
        finished: false,
        refreshing: false,
        startX: 0,
        endX: 0
       
      }
    },
    props: {
       chartIds: Array,
       chartOutlineIds: Array,
       chartOnlineIds: Array
    },
    components: {
      [Search.name]: Search,
      [Icon.name]: Icon,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [List.name]: List,
      [PullRefresh.name]: PullRefresh,
      HeaderNav,
      Footer
    },
     watch: {
      
      //改变上线下线状态
        chartOutlineIds(newVal){
          let that = this
          for(let i = 0; i < that.list.length; i ++){
            for(let j = 0; j < newVal.length; j ++){
              if(newVal[j] == that.list[i].id){
                that.list[i].isOnLine = false
              }
            }
          }
          // that.$parent.$data.chartOutlineIds = [];
        },
        chartOnlineIds(newVal){
          let that = this
          for(let i = 0; i < that.list.length; i ++){
            for(let j = 0; j < newVal.length; j ++){
              if(newVal[j] == that.list[i].id){
                that.list[i].isOnLine = true
              }
            }
          }
          // that.$parent.$data.chartOnlineIds = [];
            // this.fullname = this.firstname + '-' + newVal
        }
        // chartIds(newVal){
        //   let that = this
        //   for(let i = 0; i < that.list.length; i ++){
        //     for(let j = 0; j < newVal.length; j ++){
        //       if(newVal[j] == that.list[i].id){
        //         that.list[i].chartFlag = true
        //       }
        //     }
        //   }
        //   // that.$parent.$data.chartOnlineIds = [];
        //     // this.fullname = this.firstname + '-' + newVal
        // }
    },
    created(){
      let that = this;
      // console.log('消息：',that.$parent.getMessage)
      //将这个事件重新给全局app.vue
      that.$parent.$data.ws.onmessage = that.$parent.getMessage;
      that.chartIds = that.$parent.$data.chartIds
      // setInterval(function () {
      //   that.onRefresh();
      // }, 5000);
      that.chartOutlineIds = that.$parent.$data.chartOutlineIds
      that.chartOnlineIds = that.$parent.$data.chartOnlineIds
    },
    methods:{
//      getColor(item){
//         let that = this;
//         let obj = item;
// // // :style="`color: ${item.isOnLine && out. ? 'rgb(6, 138, 87)' : '#a1a1a1'} `"

//         for(let i = 0; i < that.chartOutlineIds.length; i ++){
//           if(that.chartOutlineIds[i] == obj.id){
//             // console.log(item.id,item.name)
//             obj.isOnLine = false;
//           }
//         }
// //         that.$parent.$data.chartOutlineIds = [];
//         for(let i = 0; i < that.chartOnlineIds.length; i ++){
//           if(that.chartOnlineIds[i] == obj.id){
//             // console.log(item.id,item.name)
//             obj.isOnLine = true;
//           }
//         }
// //         that.$parent.$data.chartOnlineIds = [];
//         // alert(item.isOnLine+','+this.list.length)
//         return obj.isOnLine ? 'color: rgb(6, 138, 87)' : 'color: #a1a1a1';
//       },
      onRefresh() {
        // 清空列表数据
        this.finished = false;
        //初始化
        this.pages = 0;
        this.list = [];
        this.page = 1;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.loadData();
      },
      loadData(){
        var that = this;
        if(that.pages > 0 && that.page > that.pages){
          that.finished = true;
        }
        let params = {
          page: that.page
        }
        if(that.name){
          params.name = that.name;
        }
        getQuery('/member/record/member/list', params)
          .then (res => {
            if(res.code == 200){
              //如果数据不够finished
              if(res.data.records.length < 10){
                that.finished = true;
              }
              that.list = that.list.concat(res.data.records)
              that.pages = res.data.pages;
              that.page ++;
              that.loading = false;
              that.refreshing = false;
            }else{
              that.$toast.fail(res.msg);
              that.finished = true;
            }
        }).catch(function (error) {
          that.error = true;     
        });
      },
      toChart(id){
        let that = this;
        let index = that.$parent.$data.chartIds.indexOf(id);
        console.log(that.$parent.$data.chartIds)
        if(index > -1){
          that.$parent.$data.chartIds.splice(index, 1);
        }
        that.$router.push({
          path:'/chatIndex',
          query: {
            id: id
          }
        })
      },
      // 删除
      deleteItem (id) {
        let that = this;
        postQuery('/member/record/delete/' + id)
          .then (res => {
            if(res.code == 200){
              that.onRefresh();
            }else{
              that.$toast.fail(res.msg);
            }
        })
      }
    }
  }
</script>
<style scoped>
  /*.Meet {
    width: 100%;
    height: 100%;
    background-color: #9ae1f3;
  }*/
  .contact_container{
    width: 99vw;
    display: flex;
    overflow-x:auto;
  }
  .contact_container::-webkit-scrollbar{
    display: none;/*去掉滚动条 */
  }
  .contact_item {
    flex-shrink: 0;
    width: 100vw;
    height: 150px;
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
  }

  .delete{
    flex-shrink: 0;
    white-space: nowrap;
    width: 25vw;
    height: 150px;
    background: #ff4949;
    font-size: 34px;
    color: #fff;
    text-align: center;
    line-height: 150px;
  }

  .contact_portrait {
    flex-shrink: 0;
    width: 120px;
    height: 110px;
    margin: 0px 20px;
    border-radius: 50%;
    overflow: hidden;
  }

  .contact_message {
    display: flex;
    width: 460px;
    height: 100px;
    line-height: 50px;
    overflow: hidden;
    align-items: center;
  }

  .contact_isOnline {
    font-weight: bold;

  }
  
  .contact_time{
  	font-size: 24px;
    margin-right: 10px;
  }

  .contact_name {
    font-weight: bold;
    font-size: 28px;
  }

  .contact_chat {
    margin-left: auto;
  }

  .contact_gift {
    margin-right: 20px;
  }

  .contact_content{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70%;
  }

  .new_msg{
    color: red;
    font-size: 16px;
    margin-left: 20px;
  }


</style>